<template>
	<view class="content">
		<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
			<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
			<view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">销量优先</view>
			<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
				<text>价格</text>
				<view class="p-box">
					<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon cuIcon-fold"></text>
					<text style="margin-top: 6upx;" :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon cuIcon-unfold"></text>
				</view>
			</view>
			<text class="cate-item cuIcon-list" @click="toggleCateMask('show')"></text>
		</view>
		<view class="errormsgDiv" v-if="nodata">
			<view class="errormsg">\（￣︶￣）/</view>
			<view class="errormsg2">暂无相关服务</view>
		</view>
		<view class="goods-list" v-else>
			<view class="goods-item" @click="navToDetailPage(goodsItem)" v-for="(goodsItem, goodsIndex) in goodsList" :key="goodsIndex">
				<view class="goods-box-single">
					<image class="goods-img" :src="goodsItem.default_img + '?imageView2/1/w/360/h/360'" mode="aspectFill"></image>
					<view class="right">
						<text class="title clamp">{{ goodsItem.goods_name }}</text>
						<view class="attr-box" v-if="goodsItem.extend">销量 {{goodsItem.extend.order_count}}  好评率 {{goodsItem.extend.good_reputation_rate}}%</view>
						<text class="price">{{ goodsItem.price }}</text>
						<view class="action-box">
							<text class="lg cuIcon-servicefill"></text>
							{{goodsItem.nickname}}
							<text class="mgl5" v-if="goodsItem.extend">接单率{{goodsItem.extend.order_receiving_rate}}%</text>
							<text class="mgl5" v-if="goodsItem.extend">平均{{goodsItem.extend.receiving_average_time}}分钟接单</text>
						</view>
					</view>
				</view>
				<!-- <view class="price-box">
					
					共
					<text class="num">7</text>
					件商品 实付款
					<text class="price">143.7</text>
				</view>
				<view class="action-box b-t">
					<button class="action-btn" @click="cancelOrder(item)">取消订单</button>
					<button class="action-btn recom">立即支付</button>
				</view> -->
			</view>
		</view>

		<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
			<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in cateList" :key="item.id">
						<view class="cate-item b-b two">{{ item.category_name }}</view>
						<view v-for="tItem in item.tags" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
							{{ tItem.name }}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import beeApp from '../../beeApp.js';
export default {
	data() {
		return {
			nodata: 0,
			cateMaskState: 0, //分类面板展开状态
			headerPosition: 'fixed',
			headerTop: '0px',
			loadingType: 'more', //加载更多状态
			filterIndex: 0,
			page: 1,
			cateId: 0, //已选三级分类id
			priceOrder: 0, //1 价格从低到高 2价格从高到低
			cateList: [],
			goodsList: [],
			order: 'MallGoods.order_by desc'
		};
	},

	onLoad(options) {
		// #ifdef H5
		this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
		// #endif
		this.cateId = options.tid;
		this.loadCateList();
		this.loadData();
		this.loadTagInfo();
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData(1);
	},
	//加载更多
	onReachBottom() {
		this.loadData();
	},
	methods: {
		//加载分类
		loadCateList() {
			var that = this;
			beeApp.api(
				'/mall/tag/getCategory',
				{
					shop_id: 328
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					that.cateList = res.data;
				}
			);
		},
		setData: function(item) {
			for (var i in item) {
				this[i] = item[i];
			}
		},

		//加载购物车
		loadTagInfo(reload = 0) {
			var that = this;
			if (reload == 1) {
				this.setData({
					loading: 0,
					data: {}
				});
			}
			this.loading = 1;
			beeApp.api(
				'mall/tag/find',
				{
					id: this.cateId
				},
				function(res) {
					that.loading = 0;
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					uni.setNavigationBarTitle({
						title: res.data.name
					});
				}
			);
		},

		//加载商品 ，带下拉刷新和上滑加载
		loadData(reload = 0) {
			var that = this;

			if (reload == 1) {
				this.setData({
					loading: 0,
					page: 1,
					lastpage: 0,
					goodsList: []
				});
			}

			var page = this.page;
			if (this.loading == 1 || this.lastpage == 1) {
				//console.log(this.data);
				return;
			}
			this.loading = 1;
			beeApp.api(
				'mall/goods/get',
				{
					page: page,
					limit: 30,
					status: 1,
					attr_id: this.cateId,
					order: this.order,
					fields: 'id,user_id,goods_name,total_stock,origin_price,price,sub_title,order_count,shop_id,default_img,MallGoods.user.extend,MallGoods.user.nickname'
				},
				function(res) {
					that.loading = 0;
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					if (res.data.list.length == 0) {
						that.lastpage = 1;
					}
					that.page++;
					that.setData({
						goodsList: that.goodsList.concat(res.data.list)
					});
					if (that.goodsList.length === 0) {
						that.nodata = 1;
					} else {
						that.nodata = 0;
					}
				}
			);
		},
		//筛选点击
		tabClick(index) {
			if (this.filterIndex === index && index !== 2) {
				return;
			}
			this.filterIndex = index;
			if (index === 2) {
				this.priceOrder = this.priceOrder === 1 ? 2 : 1;
			} else {
				this.priceOrder = 0;
			}
			uni.pageScrollTo({
				duration: 300,
				scrollTop: 0
			});
			if (this.filterIndex == 0) {
				this.order = 'MallGoods.order_by desc';
			}
			if (this.filterIndex == 1) {
				this.order = 'MallGoods.order_count desc';
			}
			if (this.filterIndex == 2 && this.priceOrder == 1) {
				this.order = 'MallGoods.price desc';
			}
			if (this.filterIndex == 2 && this.priceOrder == 1) {
				this.order = 'MallGoods.price';
			}
			this.loadData(1);
		},
		//显示分类面板
		toggleCateMask(type) {
			let timer = type === 'show' ? 10 : 300;
			let state = type === 'show' ? 1 : 0;
			this.cateMaskState = 2;
			setTimeout(() => {
				this.cateMaskState = state;
			}, timer);
		},
		//分类点击
		changeCate(item) {
			this.cateId = item.id;
			this.toggleCateMask();
			uni.pageScrollTo({
				duration: 300,
				scrollTop: 0
			});
			this.loadData(1);
		},
		//详情
		navToDetailPage(item) {
			//测试数据没有写id，用title代替
			let id = item.id;
			uni.navigateTo({
				url: `/pages/product/product?id=${id}`
			});
		},
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
}
.content {
	padding-top: 96upx;
}

.navbar {
	position: fixed;
	left: 0;
	top: var(--window-top);
	display: flex;
	width: 100%;
	height: 80upx;
	background: #fff;
	box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 30upx;
		color: $font-color-dark;
		position: relative;
		&.current {
			color: $base-color;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 120upx;
				height: 0;
				border-bottom: 4upx solid $base-color;
			}
		}
	}
	.p-box {
		display: flex;
		flex-direction: column;
		.yticon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30upx;
			height: 14upx;
			line-height: 1;
			margin-left: 4upx;
			font-size: 26upx;
			color: #888;
			&.active {
				color: $base-color;
			}
		}
		.xia {
			transform: scaleY(-1);
		}
	}
	.cate-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 80upx;
		position: relative;
		font-size: 44upx;
		&:after {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			border-left: 1px solid #ddd;
			width: 0;
			height: 36upx;
		}
	}
}

/* 分类 */
.cate-mask {
	position: fixed;
	left: 0;
	top: var(--window-top);
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 95;
	transition: 0.3s;

	.cate-content {
		width: 630upx;
		height: 100%;
		background: #fff;
		float: right;
		transform: translateX(100%);
		transition: 0.3s;
	}
	&.none {
		display: none;
	}
	&.show {
		background: rgba(0, 0, 0, 0.4);

		.cate-content {
			transform: translateX(0);
		}
	}
}
.cate-list {
	display: flex;
	flex-direction: column;
	height: 100%;
	.cate-item {
		display: flex;
		align-items: center;
		height: 90upx;
		padding-left: 30upx;
		font-size: 28upx;
		color: #555;
		position: relative;
	}
	.two {
		height: 64upx;
		color: #303133;
		font-size: 30upx;
		background: #f8f8f8;
	}
	.active {
		color: $base-color;
	}
}

/* 商品列表 */
/* 单条商品 */
.goods-item {
	background-color: #fff;
	margin-bottom: 10upx;
}
.goods-box-single {
	display: flex;
	padding: 20upx 6upx;

	.goods-img {
		display: block;
		width: 180upx;
		height: 180upx;
	}
	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 30upx 0 24upx;
		overflow: hidden;
		.title {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			line-height: 1;
		}
		.attr-box {
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			padding: 10upx 12upx;
		}
		.price {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			&:before {
				content: '￥';
				font-size: $font-sm;
				margin: 0 2upx 0 8upx;
			}
		}
	}
}
.mgl5 {
	margin-left: 5px;
}
.action-box {
	display: flex;
	// justify-content: flex-end;
	align-items: center;
	height: 60upx;
	position: relative;
	border-top: 1upx solid #eee;
	margin-top: 5upx;
	font-size: $font-sm + 2upx;
	color: $font-color-light;
}
</style>
